<script setup>
import { getPriceList } from '@/apis/pay';
import commonProblem from './components/commonProblem.vue';
import introduce from './components/introduce.vue';
import { useUserInfoStore, useI18nStore } from '@/stores/index.js';
const userInfoStore = useUserInfoStore();
const i18nStore = useI18nStore();
const { listInfo } = storeToRefs(userInfoStore);
const router = useRouter();
const route = useRoute();
const active = ref(1);
const tab_active = ref(1);
function changeActive(num) {
  active.value = num;
  if (num == 1) {
    tabActive(1);
    tab_title.value = i18nStore.translate('index63');
    tabList.value = products.value;
    mobileTable.value = freeTable.value;
    describe.value = describe1.value;
  }
  if (num == 2) {
    tabActive(2);
    tab_title.value = i18nStore.translate('index62');
    tabList.value = products2.value;
    mobileTable.value = payTable.value;
    describe.value = describe2.value;
  }
}

const tab_title = ref(i18nStore.translate('index62'));
const describe = ref();
const describe1 = ref();
const describe2 = ref();
const data = ref();
function tabActive(num) {
  tab_active.value = num;
  getList();
}

const tabList = ref();
const products = ref();
const products2 = ref();
const mobileTable = ref();
const freeTable = ref();
const payTable = ref();

async function getList() {
  const res = await getPriceList({ type: tab_active.value });
  if (res.status === 0) {
    data.value = res.data;
  }
}
function convertToTime(num) {
  if (num == null && num == undefined) {
    return '';
  }
  if (num < 12) {
    return num + i18nStore.translate('index120');
  } else if (num == 12) {
    return i18nStore.translate('index121');
  } else if (num == 24) {
    return i18nStore.translate('index122');
  } else if (num == 36) {
    return i18nStore.translate('index123');
  } else {
    return num;
  }
}

function topay(row) {
  listInfo.value = row;
  router.push({
    path: `/pay/${row.price_id}`,
    query: {
      type: tab_active.value
    }
  });
}

const goType = () => {
  if (route.query.type) {
    if (route.query.type == 1) {
      active.value = 1;
    } else {
      active.value = 2;
    }
    tab_active.value = route.query.type;
  }
};

watch(
  () => i18nStore.translate,
  () => {
    window.location.reload();
  }
);

onMounted(() => {
  goType();
  getList();
  updatelist();
});
const updatelist = () => {
  (describe.value = [
    {
      test: i18nStore.translate('index109')
    },
    {
      test: i18nStore.translate('index113')
    },
    {
      test: i18nStore.translate('index114')
    }
  ]),
    (describe1.value = [
      {
        test: i18nStore.translate('index115')
      },
      {
        test: i18nStore.translate('index116')
      }
    ]),
    (describe2.value = [
      {
        test: i18nStore.translate('index109')
      },
      {
        test: i18nStore.translate('index116')
      },
      {
        test: i18nStore.translate('index114')
      }
    ]),
    (data.value = [
      {
        id: 1,
        type: i18nStore.translate('index70'),
        size: '100M',
        time: i18nStore.translate('index117'),
        tips: i18nStore.translate('index118')
      },
      {
        id: 2,
        type: i18nStore.translate('index71'),
        size: '150M',
        time: i18nStore.translate('index117'),
        describe: [
          {
            test: i18nStore.translate('index115')
          },
          {
            test: i18nStore.translate('index116')
          }
        ],
        tips: i18nStore.translate('index119')
      },
      {
        id: 3,
        type: i18nStore.translate('index105'),
        size: '200M',
        time: i18nStore.translate('index117'),
        describe: [
          {
            test: i18nStore.translate('index115')
          },
          {
            test: i18nStore.translate('index116')
          }
        ],
        tips: i18nStore.translate('index119')
      },
      {
        id: 4,
        type: i18nStore.translate('index107'),
        size: '300M',
        time: i18nStore.translate('index117'),
        describe: [
          {
            test: i18nStore.translate('index115')
          },
          {
            test: i18nStore.translate('index116')
          }
        ],
        tips: i18nStore.translate('index119')
      }
    ]),
    (tabList.value = [
      {
        data1: i18nStore.translate('index64'),
        data2: 'Pro I',
        data3: 'Pro II',
        data4: 'Pro III',
        data5: 'Pro IIII'
      },
      {
        data1: i18nStore.translate('index65'),
        data2: '√',
        data3: '√',
        data4: '√',
        data5: '√'
      },
      {
        data1: i18nStore.translate('index66'),
        data2: '√',
        data3: '√',
        data4: '√',
        data5: '√'
      },
      {
        data1: i18nStore.translate('index67'),
        data2: '√',
        data3: '√',
        data4: '√',
        data5: '√'
      },
      {
        data1: i18nStore.translate('index68'),
        data2: '√',
        data3: '√',
        data4: '√',
        data5: '√'
      }
    ]);
  (products.value = [
    {
      data1: i18nStore.translate('index69'),
      data2: i18nStore.translate('index70'),
      data3: i18nStore.translate('index71'),
      data4: i18nStore.translate('index72'),
      data5: i18nStore.translate('index73')
    },
    {
      data1: i18nStore.translate('index74'),
      data2: '100M',
      data3: '150M',
      data4: '200M',
      data5: '300M'
    },
    {
      data1: i18nStore.translate('index75'),
      data2: i18nStore.translate('index93'),
      data3: i18nStore.translate('index93'),
      data4: i18nStore.translate('index93'),
      data5: i18nStore.translate('index93')
    },
    {
      data1: i18nStore.translate('index76'),
      data2: i18nStore.translate('index102'),
      data3: i18nStore.translate('index102'),
      data4: i18nStore.translate('index102'),
      data5: i18nStore.translate('index102')
    }
  ]),
    (products2.value = [
      {
        data1: i18nStore.translate('index77'),
        data2: 'Pro I',
        data3: 'Pro II',
        data4: 'Pro III',
        data5: 'Pro IIII'
      },
      {
        data1: i18nStore.translate('index78'),
        data2: '√',
        data3: '√',
        data4: '√',
        data5: '√'
      },
      {
        data1: i18nStore.translate('index79'),
        data2: '√',
        data3: '√',
        data4: '√',
        data5: '√'
      },
      {
        data1: i18nStore.translate('index80'),
        data2: '√',
        data3: '√',
        data4: '√',
        data5: '√'
      },
      {
        data1: i18nStore.translate('index81'),
        data2: '√',
        data3: '√',
        data4: '√',
        data5: '√'
      }
    ]),
    (mobileTable.value = [
      {
        title: i18nStore.translate('index82'),
        desc: [
          {
            type: 'Pro I',
            test: '√'
          },
          {
            type: 'Pro II',
            test: '√'
          },
          {
            type: 'Pro III',
            test: '√'
          },
          {
            type: 'Pro IIII',
            test: '√'
          }
        ]
      },
      {
        title: i18nStore.translate('index83'),
        desc: [
          {
            type: 'Pro I',
            test: '√'
          },
          {
            type: 'Pro II',
            test: '√'
          },
          {
            type: 'Pro III',
            test: '√'
          },
          {
            type: 'Pro IIII',
            test: '√'
          }
        ]
      },
      {
        title: i18nStore.translate('index84'),
        desc: [
          {
            type: 'Pro I',
            test: '√'
          },
          {
            type: 'Pro II',
            test: '√'
          },
          {
            type: 'Pro III',
            test: '√'
          },
          {
            type: 'Pro IIII',
            test: '√'
          }
        ]
      },
      {
        title: i18nStore.translate('index85'),
        desc: [
          {
            type: 'Pro I',
            test: '√'
          },
          {
            type: 'Pro II',
            test: '√'
          },
          {
            type: 'Pro III',
            test: '√'
          },
          {
            type: 'Pro IIII',
            test: '√'
          }
        ]
      }
    ]),
    (freeTable.value = [
      {
        title: i18nStore.translate('index86'),
        desc: [
          {
            type: i18nStore.translate('index87'),
            test: '100M'
          },
          {
            type: i18nStore.translate('index88'),
            test: '150M'
          },
          {
            type: i18nStore.translate('index89'),
            test: '200M'
          },
          {
            type: i18nStore.translate('index90'),
            test: '300M'
          }
        ]
      },
      {
        title: i18nStore.translate('index91'),
        desc: [
          {
            type: i18nStore.translate('index92'),
            test: i18nStore.translate('index93')
          },
          {
            type: i18nStore.translate('index94'),
            test: i18nStore.translate('index95')
          },
          {
            type: i18nStore.translate('index96'),
            test: i18nStore.translate('index97')
          },
          {
            type: i18nStore.translate('index98'),
            test: i18nStore.translate('index99')
          }
        ]
      },
      {
        title: i18nStore.translate('index100'),
        desc: [
          {
            type: i18nStore.translate('index101'),
            test: i18nStore.translate('index102')
          },
          {
            type: i18nStore.translate('index103'),
            test: i18nStore.translate('index104')
          },
          {
            type: i18nStore.translate('index105'),
            test: i18nStore.translate('index106')
          },
          {
            type: i18nStore.translate('index107'),
            test: i18nStore.translate('index108')
          }
        ]
      }
    ]),
    (payTable.value = [
      {
        title: i18nStore.translate('index109'),
        desc: [
          {
            type: 'Pro I',
            test: '√'
          },
          {
            type: 'Pro II',
            test: '√'
          },
          {
            type: 'Pro III',
            test: '√'
          },
          {
            type: 'Pro IIII',
            test: '√'
          }
        ]
      },
      {
        title: i18nStore.translate('index110'),
        desc: [
          {
            type: 'Pro I',
            test: '√'
          },
          {
            type: 'Pro II',
            test: '√'
          },
          {
            type: 'Pro III',
            test: '√'
          },
          {
            type: 'Pro IIII',
            test: '√'
          }
        ]
      },
      {
        title: i18nStore.translate('index111'),
        desc: [
          {
            type: 'Pro I',
            test: '√'
          },
          {
            type: 'Pro II',
            test: '√'
          },
          {
            type: 'Pro III',
            test: '√'
          },
          {
            type: 'Pro IIII',
            test: '√'
          }
        ]
      },
      {
        title: i18nStore.translate('index112'),
        desc: [
          {
            type: 'Pro I',
            test: '√'
          },
          {
            type: 'Pro II',
            test: '√'
          },
          {
            type: 'Pro III',
            test: '√'
          },
          {
            type: 'Pro IIII',
            test: '√'
          }
        ]
      }
    ]);
};
</script>

<template>
  <div class="index mobile:overflow-x-hidden">
    <!-- 头部导航 -->
    <div class="auto pc:max-w-[1200px] mobile:text-4xl mobile:px-10">
      <Nav />
    </div>

    <!-- 标题 -->
    <div class="mt-[60px] mb-[80px] mobile:hidden">
      <div class="wrapper-content">
        <h1 class="mb-[10px] text-[52px] font-bold">
          {{ i18nStore.translate('index46') }}
        </h1>
        <p class="text-[#666666] text-[18px]">
          {{ i18nStore.translate('index47') }}
        </p>
      </div>
    </div>

    <!-- 标题 mobile-->
    <div class="mt-[60px] mb-[80px] pc:hidden">
      <div class="max-w-[1200px] auto mobile:px-10">
        <h1 class="mb-[10px] font-bold mobile:text-4xl">
          {{ i18nStore.translate('index46') }}
        </h1>
        <p class="text-[#666666] text-sm">
          {{ i18nStore.translate('index47') }}
        </p>
      </div>
    </div>

    <!-- tab -->
    <div class="auto pc:max-w-[1200px] mobile:px-10 mobile:w-full">
      <div class="tabs flex justify-between text-center mb-[60px]">
        <div
          class="tab-pane"
          :class="active === 1 ? 'active' : ''"
          @click="changeActive(1)"
        >
          <h1
            class="text-[36px] font-bold mt-[30px] mb-[6px] mobile:text-[24px]"
          >
            {{ i18nStore.translate('index48') }}
          </h1>
          <p class="text-[14px] text-[#666] mobile:text-[12px]">
            {{ i18nStore.translate('index49') }}
          </p>
        </div>
        <div
          class="tab-pane"
          :class="active === 2 ? 'active' : ''"
          @click="changeActive(2)"
        >
          <h1
            class="text-[36px] font-bold mt-[30px] mb-[6px] mobile:text-[24px]"
          >
            {{ i18nStore.translate('index50') }}
          </h1>
          <p class="text-[14px] text-[#666] mobile:text-[12px]">
            {{ i18nStore.translate('index51') }}
          </p>
        </div>
      </div>

      <div
        class="tebView flex pc:justify-start text-center border-b-[1px] mobile:justify-evenly"
        v-if="active === 2"
      >
        <div
          class="tabPanel pc:w-[180px] text-[26px] leading-[60px] font-bold cursor-pointer mobile:flex-1"
          :class="tab_active == 2 ? 'tab_active' : ''"
          @click="tabActive(2)"
        >
          {{ i18nStore.translate('index52') }}
        </div>
        <div
          class="tabPanel pc:w-[180px] text-[26px] leading-[60px] font-bold cursor-pointer mobile:flex-1"
          :class="tab_active == 4 ? 'tab_active' : ''"
          @click="tabActive(4)"
        >
          {{ i18nStore.translate('index53') }}
        </div>
        <div
          class="tabPanel pc:w-[180px] text-[26px] leading-[60px] font-bold cursor-pointer mobile:flex-1"
          :class="tab_active == 3 ? 'tab_active' : ''"
          @click="tabActive(3)"
        >
          {{ i18nStore.translate('index54') }}
        </div>
      </div>

      <div class="describe mt-[30px]">
        <ul class="pc:flex pc:justify-between pc:flex-wrap">
          <li
            class="flex-1 pc:min-w-[300px] h-[470px] pc:border pl-[50px] pt-[40px] pb-[20px] mobile:w-full mobile:border-[1px] mb-[30px] mobile:pl-[70px]"
            v-for="(i, index) in data"
            :key="i.price_id"
          >
            <h4 class="text-[#333] text-[20px] font-bold">
              {{ i18nStore.translate('index55') + (index + 1) }}
            </h4>
            <h1
              class="text-[#333] text-[50px] font-bold mt-[30px] mobile:mt-[20px]"
            >
              {{ i.description }}
            </h1>
            <p class="text-[#888] text-[16px] mb-[20px]">
              {{ convertToTime(i.months) }}
            </p>
            <p class="text-[#333] text-[18px] mb-[10px]" v-for="t in describe">
              {{ t.test }}
            </p>
            <p class="text-[#333] text-[18px] mb-[60px]"></p>
            <div
              class="w-[140px] h-[56px] leading-[56px] mb-[10px] bg-[#DCF5FB] text-[#00E1FF] text-center font-bold cursor-pointer"
              @click="topay(i)"
            >
              {{ i18nStore.translate('index56') }}
            </div>
            <p class="text-[#999] text-[12px]">{{ i.tips }}</p>
          </li>
        </ul>
      </div>

      <div class="rule text-[14px] text-[#FF7373]" v-if="tab_active == 2">
        {{ i18nStore.translate('index57') }}
      </div>

      <div
        class="bg-[#F5F7FA] border-[1px] flex justify-between px-[60px] py-[40px] mt-[40px] mobile:hidden"
      >
        <div class="left">
          <h1 class="text-[26px] font-bold mb-[20px]">
            {{ i18nStore.translate('index58') }}
          </h1>
          <p>
            <i class="mr-[5px] text-[#666666] leading-[40px]">√</i
            >{{ i18nStore.translate('index59') }}
          </p>
          <p>
            <i class="mr-[5px] text-[#666666] leading-[30px]">√</i
            >{{ i18nStore.translate('index60') }}
          </p>
        </div>
        <div class="right text-center">
          <h1 class="text-[40px] font-bold mb-[10px]">
            ￥0<span class="text-[#888] text-[14px] ml-[10px]">{{
              i18nStore.translate('index61')
            }}</span>
          </h1>
          <router-link to="/register">
            <div
              class="w-[140px] h-[56px] leading-[56px] mb-[10px] bg-[#DCF5FB] text-[#00E1FF] text-center font-bold cursor-pointer"
            >
              {{ i18nStore.translate('index18') }}
            </div>
          </router-link>
        </div>
      </div>

      <div
        class="bg-[#F5F7FA] border-[1px] px-[60px] py-[20px] mt-[40px] pc:hidden"
      >
        <h1 class="text-2xl mb-[20px]">{{ i18nStore.translate('index58') }}</h1>
        <p>
          <i class="mr-[5px] text-[#666666] leading-[30px]">√</i>
          {{ i18nStore.translate('index59') }}
        </p>
        <p>
          <i class="mr-[5px] text-[#666666] leading-[20px]">√</i>
          {{ i18nStore.translate('index60') }}
        </p>
        <h1 class="text-[40px] font-bold mt-[30px] mb-[10px]">
          ￥0<span class="text-[#888] text-[14px] ml-[10px]">{{
            i18nStore.translate('index61')
          }}</span>
        </h1>
        <router-link to="/register">
          <div
            class="w-[140px] h-[56px] leading-[56px] mb-[10px] bg-[#DCF5FB] text-[#00E1FF] text-center font-bold cursor-pointer"
          >
            {{ i18nStore.translate('index18') }}
          </div>
        </router-link>
      </div>

      <div class="mt-[50px] mb-[80px] w-[1200px] mobile:hidden">
        <h1 class="text-[26px] font-bold mb-[10px]">{{ tab_title }}</h1>
        <div class="w-full">
          <div class="w-[1200px]">
            <div
              class="tb flex justify-center items-center text-center text-xl font-bold"
              v-for="i in tabList"
            >
              <div
                class="th w-[240px] h-[80px] text-left pl-[40px] flex items-center"
              >
                {{ i.data1 }}
              </div>
              <div class="th w-[240px] h-[80px] leading-[80px]">
                {{ i.data2 }}
              </div>
              <div class="th w-[240px] h-[80px] leading-[80px]">
                {{ i.data3 }}
              </div>
              <div class="th w-[240px] h-[80px] leading-[80px]">
                {{ i.data4 }}
              </div>
              <div class="th w-[240px] h-[80px] leading-[80px]">
                {{ i.data5 }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-[50px] mb-[80px] w-full pc:hidden">
        <h1 class="text-2xl mb-[10px]">{{ tab_title }}</h1>
        <div class="w-full">
          <div class="font-bold">
            <div
              v-for="i in mobileTable"
              class="text-base mb-[20px] border-[1px]"
            >
              <div
                class="table_title leading-[60px] border-b-[1px] px-10 bg-[#F8F9FA]"
              >
                {{ i.title }}
              </div>
              <div
                class="table_cont flex justify-between px-10 leading-[50px] border-b-[1px]"
                v-for="t in i.desc"
              >
                <div>{{ t.type }}</div>
                <div class="text-[#666]">{{ t.test }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据 -->
    <div class="pc:max-w-[1200px] auto mobile:px-10">
      <introduce />
    </div>

    <!-- 常见问题 -->
    <div class="pc:max-w-[1200px] auto mobile:px-10">
      <commonProblem />
    </div>

    <!-- 免费试用 -->
    <div class="banner mt-[60px]">
      <Banner
        :title="i18nStore.translate('index144')"
        :button="i18nStore.translate('index145')"
        to="register"
      />
    </div>
    <!-- 底部栏 -->
    <div class="foot auto pc:max-w-[1200px] mobile:px-10">
      <Foot />
    </div>
  </div>
</template>

<style scoped lang="scss">
// @import "./index.scss";
.auto {
  margin: 0 auto;
}
.wrapper-content {
  width: 1200px;
  margin: 0 auto;
}

.button {
  margin: 0 auto;
}

.tabs {
  width: 100%;

  .tab-pane {
    width: 50%;
    height: 140px;
    background-color: #f4f5f6;
    cursor: pointer;
  }
  .active {
    background-color: #fff;
    position: relative;
    &::after {
      position: absolute;
      width: 100%;
      height: 6px;
      content: '';
      background-color: #00e1ff;
      left: 0;
      top: 0;
      // z-index: -1;
    }
  }
}
@media only screen and (min-width: 1023px) {
  .describe {
    ul {
      li:last-child {
        // border: none;
      }
      li {
        // border-right: none;
      }
      li:last-child {
        // border: none;
      }
    }
  }
  .tab_active {
    color: #00e1ff;
    position: relative;
    &::after {
      position: absolute;
      width: 180px;
      height: 1px;
      content: '';
      background-color: #00e1ff;
      left: 0;
      bottom: -1px;
    }
  }
}
.tab_active {
  color: #00e1ff;
  position: relative;
  &::after {
    position: absolute;
    width: 100%;
    height: 1px;
    content: '';
    background-color: #00e1ff;
    left: 0;
    bottom: -1px;
  }
}
.tb {
  &:nth-child(odd) {
    background-color: #f8f9fa;
  }
  &:nth-child(even) {
    background-color: #fff;
  }
  .th {
    border-right: 1px solid #e5e7eb;
  }
  .th:last-child {
    border: none;
  }
}
.table_cont {
  &:last-child {
    border: none;
  }
}
</style>
